<template>
  <div class="icon" style="word-break: break-all">
    <div v-if="clickFalse" id="pause" @click="pause()">
      <i class="el-icon-video-pause"></i>
    </div>
    <div v-else id="play" @click="play()">
      <i class="el-icon-video-play"></i>
    </div>
  </div>
  <div
    id="timeline-chart"
    style="height: 100%; width: 95%; overflow-wrap: break-word"
  ></div>
</template>
  
<script>
import * as echarts from "echarts";
import timelineData from "../../assets/json/shijianLine.json";
import { useStore } from "vuex";
import { watch, onMounted, ref } from "vue";

export default {
  data() {
    return {
      timelineData,
    };
  },
  methods: {},
  setup() {
    const store = useStore();
    const time = store.state.time;
    let clickFalse = ref(true);
    const chart = ref(null);
    // 监听 time 的变化
    watch(
      () => store.state.time,
      (newTime) => {
        moveToTimelineNode(newTime);
      }
    );

    onMounted(() => {
      drawTimelineChart();
    });

    function pause() {
      store.state.isPause = false;
      clickFalse.value = false;
    }
    function play() {
      store.state.isPause = true;
      clickFalse.value = true;
    }

    function drawTimelineChart() {
      chart.value = echarts.init(document.getElementById("timeline-chart"));
      // chart.innerHTML = "";
      var option = {
        baseOption: {
          timeline: {
            axisType: "category",
            autoPlay: false,
            currentIndex: getIndexByTime(time),
            data: timelineData.map((item) => item.year),
            controlPosition: "none",
            x: 10,
            x2: 50,
            lineStyle: {
              color: "#78675f", // 设置时间线的颜色
              // shadowColor:'#b5a48c'
            },
            label: {
              show: true,
              textStyle: {
                color: "#000",
              },
            },
            itemStyle: {
              normal: {
                color: "#b5a48c", // 正常状态下的节点颜色
              },
              emphasis: {
                color: "#78675f", // 高亮状态（鼠标悬浮时）下的节点颜色
              },
            },
            checkpointStyle: {
              color: "#78675f", // 当前选中项的颜色
              borderColor: "#78675f",
              // symbol:'auto',
              // borderColor: "red",
              borderWidth: 1,
              label: {
                show: false,
                textStyle: {
                  color: "auto",
                },
              },
            },
            progress: {
              itemStyle: {
                color: "#78675f",
              },
              lineStyle: {
                color: "#78675f",
              },
            },
          },
          series: [
            {
              type: "timeline",
              showSymbol: false,
              label: {
                emphasis: {
                  show: true,
                  color: "#fff",
                },
              },
              data: [],
            },
          ],
          graphic: [
            {
              type: "text",
              left: 10,
              top: 10,
              style: {
                text: "Your Data Information Here",
                font: "18px Arial",
                fill: "#705752",
              },
            },
          ],
        },
        options: [],
      };

      chart.value.on("timelinechanged", function (params) {
        // params 包含有关事件的信息，如 currentIndex，即当前的时间点索引
        var currentIndex = params.currentIndex;

        // 获取时间节点的时间点
        var currentTime = timelineData[currentIndex].year;

        // 更新 store.state.time 的值
        store.commit("updateTime", currentTime); // 假设你的 mutation 叫做 updateTime
        store.commit("updateTitle", null);
      });

      chart.value.setOption(option);
      updateDataInfo();
    }

    function moveToTimelineNode(currentTime) {
      const currentIndex = getIndexByTime(currentTime);
      chart.value.dispatchAction({
        type: "timelineChange",
        currentIndex: currentIndex,
      });
      updateDataInfo();
    }

    function updateDataInfo() {
      const dataInfo = fetchDataInfo(store.state.time);

      chart.value.setOption({
        graphic: [
          {
            type: "text",
            left: 10,
            top: 10,
            style: {
              text: dataInfo,
              font: "18px Arial",
              fill: "#705752",
            },
          },
        ],
      });
    }

    function fetchDataInfo(currentTime) {
      const data = timelineData.find((item) => item.year === currentTime);
      if (data) {
        const info = `${data.event_type}:\n ${data.event_name}`;
        const maxLength = 50; // 设置信息的最大长度
        if (info.length > maxLength) {
          // 如果信息超过最大长度，则进行换行

          const regex = new RegExp(`.{1,${maxLength}}`, "g");
          return info.match(regex).join("\n");
        } else {
          return info;
        }
      } else {
        return "No data available";
      }
    }
    function getIndexByTime(currentTime) {
      return timelineData.findIndex((item) => item.year === currentTime);
    }

    return { store, time, clickFalse, pause, play };
  },
};
</script>
  
<style>
i {
  font-size: 30px;
}
</style>
  